<template>
    <div style="display: flex;justify-content: space-between">
        <div>
            <h2 style="margin: 3% auto;text-align: center">用户信息</h2>
            <Form :model="userVo" :label-width="80">
                <FormItem label="昵称:">
                    <Input v-model="userVo.uNickname" placeholder="请输入昵称" maxlength="7" show-word-limit/>
                </FormItem>
                <FormItem label="邮箱:">
                    <Input v-model="userVo.uEmail" placeholder="请输入邮箱"/>
                </FormItem>
                <FormItem label="生日:">
                    <Input type="date" placeholder="请选择生日" v-model="userVo.uBirthday"/>
                </FormItem>
                <FormItem label="性别:" style="text-align: left">
                    <RadioGroup v-model="userVo.uSex">
                        <Radio :label="1">男</Radio>
                        <Radio :label="0">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem>
                    <Button type="primary" long @click.native="updateUser">修 改</Button>
                </FormItem>
            </Form>
        </div>
        <div style="width: 50%">
            <div style="text-align:left;margin-top: 20px;">
                <a>
                    <Avatar style="margin-left: 2%;margin-bottom: 2%" shape="square" :src="userHeadPic"
                            size="80"/>
                </a>
                点击下面头像更换默认头像
                <div style="margin-top: 2%;display: flex;justify-content: space-between">
                    <Avatar class="avatar" v-for="(item,index) in headList" :key="index"
                            :src="`https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/headPicture/${item}.jpg`"
                            size="80" @click.native="changeHeadPic(item)"/>
                </div>
                <Upload style="margin-top: 4%" action="http://www.lhamster.cn:8080/edwardBlog/upLoadFile"
                        :headers="uploadHeader"
                        :on-success="uploadSuccess">
                    <Button icon="ios-cloud-upload-outline">点击上传头像</Button>
                </Upload>

            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        userVo: {
          uNickname: '',
          uEmail: '',
          uSex: 0,
          uBirthday: ''
        },
        userHeadPic: '',
        headList: [0, 1, 2, 3, 4],
        uploadHeader: {
          type: 'front',
          lhamster_identity_info: window.localStorage.getItem('lhamster_identity_info')
        }
      }
    },
    mounted () {
      this.getUserInfo()
    },
    methods: {
      // 获取当前登录用户的信息
      getUserInfo () {
        this.$http.get('user').then(res => {
          res = res.data
          if (res.code === 0) {
            this.userVo.uNickname = res.data.unickname
            this.userVo.uEmail = res.data.uemail
            this.userVo.uSex = res.data.usex ? 1 : 0
            this.userVo.uBirthday = res.data.uBirthday
            this.userHeadPic = res.data.uheadpicture
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 更新用户信息
      updateUser () {
        var parmas = new URLSearchParams(this.userVo)
        parmas.set('uSex', this.userVo.uSex === 1)
        this.$http.put('user', parmas).then(res => {
          res = res.data
          if (res.code === 2005) {
            // 重新加载通知消息
            this.$store.dispatch('informInfo', this)
            this.$Message.success(res.msg)
            location.reload()
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 更换默认头像
      changeHeadPic (item) {
        var param = new URLSearchParams()
        param.append('newHeadPicUrl', `https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/headPicture/${item}.jpg`)
        this.$http.post('user', param).then(res => {
          res = res.data
          if (res.code === 2030) {
            this.$Message.success(res.msg)
            location.reload()
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 自定义头像上传
      uploadSuccess () {
        this.$Message.success('头像更换成功')
        location.reload()
      }
    }
  }
</script>

<style scoped>
    .avatar {
        transition: transform 0.5s;
    }

    .avatar:hover {
        cursor: hand;
        transform: translate(3px, 3px);
    }
</style>
